<template>
	<view class="container">
		<view class="user-section">
			<view class="vip-card-box">
				<image class="card-bg" mode="widthFix" src="static/card.png"></image>
				<view class="img">
					<image class="portrait" src='static/touxiangkuang.png'></image>
					<image class="face" src='/static/img/public/myl.png'></image>
					<image class="vip" src='/static/vn.png'></image>
					<text class="text">V<span>2</span></text>
				</view>
				<view class="text">
					铂金会员卡
				</view>
				<view class="cart_number">NO.&nbsp;&nbsp; {{vip_code}}</view>
			</view>
		</view>
		<!-- 会员特权 -->
		<view class="member-section">
			<view class="title">
				<view class="text">会员特权</view>
				<view class="checkorder" @tap="toOrderList(0)">更多会员特权持续更新中...</view>

			</view>
			<scroll-view class="list-scroll-content" scroll-x>
				<view class="box" v-for="(row,index) in authorityList" :key="index">
					<view class="img">
						<image :src="imgsrc + row.pic"></image>
					</view>
					<text>{{row.title}}</text>
					<text>{{row.title_small}}</text>
				</view>
			</scroll-view>

		</view>
		<view class="proxy-section">
			<view class="title">
				<view class="text">权益升级</view>
			</view>
			<view class="content">
				<image class="haobao_img" :src="url" mode="widthFix"></image>
				<view class="a01">
					<view class="box-item" v-for="(row,index) in productList" :key="index" @tap="toGoods(row)">
						<view class="img">
							<image :src='row.img' mode="widthFix"></image>
						</view>
						<view class="info">
							<view class="title">{{row.name}}</view>
							<view class="price">市场价<text>{{row.price}}</text></view>
							<view class="desc">
								{{row.desc}}
							</view>
						</view>
					</view>
				</view>
				<view class="a02">
					<view class="btn" @click="buy()">
						<text>立即开通</text>
						<text>（优惠价￥{{price}}）</text>
					</view>
					<text class="text">点击开通代表阅读并同意<span @tap="doProtocol('https://download.dfkjt.com/agentCooperationAgreement.txt', '牧耘郎代理商合作协议')">《牧耘郎代理合作商协议》</span></text>
				</view>
			</view>
		</view>
		<view class="liucheng-section">
			<view class="img">
				<image src="/static/liucheng.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 会员推荐模块暂时屏蔽  Jack -->
		<!-- <view class="recommend-section">
			<view class="s-header">
				<view class="text">会员推荐</view>
			</view>
			<view class="product-list">
				<view class="item">
					<view class="img">
						<image src="/static/img/goods/yumi.png"></image>
					</view>
					<view class="info">
						<view class="title">云南甜玉米 水果玉米水果玉米水果玉米</view>
						<view class="text">规格：500g/盒</view>
						<view class="price">
							<span class="icon">￥</span>
							<span class="sale">18</span>
							<span class="slogan">￥28</span>
						</view>
					</view>

				</view>
				<view class="item">
					<view class="img">
						<image src="/static/img/goods/yumi.png"></image>
					</view>
					<view class="info">
						<view class="title">云南甜玉米 水果玉米 砝码</view>
						<view class="text">规格：500g/盒</view>
						<view class="price">
							<span class="icon">￥</span>
							<span class="sale">18</span>
							<span class="slogan">￥28</span>
						</view>
					</view>

				</view>
			</view>
		</view> -->
	</view>

</template>

<script>
	import Api from '@/common/api';
	export default {
		components: {},
		data() {
			return {
				imgsrc: Api.imgsrc,
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				productList: [{
					id: 1,
					img: '/static/img/goods/liangxidami.png',
					name: '量硒大米',
					price: 2000,
					desc: '7袋'
				}], //代理商赠送商品
				// 订单类型
				authorityList: [],
				price: '',
				vip_code: '',
				url: '',
				items: '',

			}
		},
		onLoad() {
			this.loadData()
		},

		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			// if (index === 0) {
			// 	this.$api.msg('点击了扫描');
			// } else if (index === 1) {
			if (index === 0) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.switchTab({
					url: '/pages/user/user'
				});
			}
		},

		methods: {
			async loadData() {
				var params = {};
				let data = await Api.apiCall('post', Api.vip.message, params);
				if (data) {
					this.authorityList = data.house;
					this.price = data.price;
					this.vip_code = data.vip_code;
					this.url = Api.imgsrc + data.url;
					this.items = data.items;
					this.productList = []
					data.products.forEach(item => {
						// this.productList.push()
						var temp = {
							'id': item.id,
							'img': Api.imgsrc + item.pic,
							'name': item.name,
							'price': item.original_price,
							'desc': item.sub_title
						}
						this.productList.push(temp)

					})
				}
			},
			doProtocol(url, title) {
				if (!url) {
					uni.showToast({
						title: '还未上传相关协议',
						icon: "none"
					});
					return;
				}
				uni.navigateTo({
					url: `/pages/public/protocol?url=${url}&title=${title}`
				})

			},
			async buy() {
				var params = {
					'items': this.items, // 商品结算SkuID和数量
					'address_id': 1, // 先不用填写收货地址
					'coupon_id': 0,
					'remark': '订单测试',
					'type': 4 // type 1为购物车创建订单， 2立即下单  3,购买会员 4.代理商购买

				}
				//商品列表
				let data = await Api.apiCall('post', Api.order.addOrder, params);
				if (data) {
					uni.removeStorage({
						key: 'buylist'
					})
					let id = data.id;
					let url = `/pages/money/pay?id=${id}&type=4`;
					uni.redirectTo({
						url: url
					})
				} else {
					uni.showToast({
						title: data.msg,
						icon: "none"
					});
				}
			},
			//商品跳转
			toGoods(e) {
				uni.navigateTo({
					url: '/mall/product/product_detail?product_id=' + e.id
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.user-section {
		width: 100%;
		height: 370upx;
		padding: 54upx 4% 106upx;
		background: linear-gradient(to right, rgba(255, 237, 197, 1.0), rgba(255, 233, 170, 1.0));
		border-bottom-left-radius: 375upx 60upx;
		border-bottom-right-radius: 375upx 60upx;

		.vip-card-box {
			width: 100%;
			height: 354upx;
			padding: 0 10upx;
			position: relative;
			color: #F9E2A2;
			font-size: $font-sm + 8upx;

			.card-bg {
				width: 670upx;
				height: 350upx;

			}

			.img {
				width: 112upx;
				height: 140upx;
				position: absolute;
				left: 60upx;
				top: 40upx;

				.portrait {
					left: 0;
					top: 0;
					width: 112upx;
					height: 112upx;
					border-radius: 50%;
					background-color: #FFF2BC;
				}

				.face {
					width: 80upx;
					height: 80upx;
					top: -102upx;
					left: 18upx;
				}

				.vip {
					width: 51upx;
					height: 40upx;
					top: -110upx;
					left: 32upx;
				}

				.text {
					top: 96upx;
					left: 42upx;
					color: #232323;
					font-size: $font-sm - 2upx;
				}

				span {
					font-size: 8upx;
				}
			}

			.text {
				position: absolute;
				top: 72upx;
				left: 200upx;

			}

			.cart_number {
				position: absolute;
				top: 280upx;
				left: 190upx;
			}
		}
	}

	.member-section {
		width: 100%;
		padding: 0 30upx;
		margin: 40upx 0 30upx;

		.title {
			width: 100%;
			padding: 56upx 0 32upx;
			font-size: 32upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32upx;
			color: #232323;
			font-weight: 600;

			.checkorder {
				color: #ACADAE;
				font-size: 24upx;
				font-weight: 300;
			}
		}

		.list-scroll-content {
			width: 100%;
			// height: 222upx;
			white-space: nowrap;
			background-color: #FFFFFF;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			border-radius: 20upx;
			box-shadow: 0upx 5upx 20upx rgba(191, 191, 191, .1);

			.box {
				width: 25%;
				// height: 222upx;
				padding: 20upx 0 35upx;
				display: inline-flex;
				flex-direction: column;
				align-items: center;

				.img {
					width: 85upx;
					height: 85upx;
					margin-bottom: 20upx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				text {
					&:first-child {
						font-size: 26upx;
						color: #232323;
						margin-bottom: 4upx;
					}

					&:last-child {
						font-size: 24upx;
						color: #ACADAE;
					}
				}
			}
		}
	}

	.proxy-section {
		width: 100%;

		.title {
			width: 100%;
			padding: 20upx 0 30upx 4%;
			font-size: 32upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32upx;
			color: #232323;
			font-weight: 600;
		}

		.content {
			width: 100%;
			height: 1222upx;
			position: relative;

			.haobao_img {
				width: 100%;
				height: 1222upx;
			}
		}

		.a01 {
			width: 100%;
			padding: 0 20upx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			top: 520upx;
			left: 0;

			.box-item {
				width: 342upx;
				height: 228upx;
				border-radius: 10upx;
				margin-bottom: 20upx;
				display: flex;
				flex-direction: row;
				background-color: #FFFFFF;

				.img {
					margin: 36upx 10upx 44upx;
					width: 148upx;
					height: 148upx;

					image {
						width: 100%;
					}
				}

				.info {
					margin: 36upx 0 44upx;
					display: flex;
					flex-direction: column;
					color: #232323;
					font-size: $font-sm;
					line-height: 1;

					.title {
						font-size: $font-sm + 4upx;
						font-weight: 6000;
					}

					.price {
						padding-left: 4upx;

						text {
							color: red;
						}

					}

					.desc {
						padding-left: 4upx;
						padding-top: 16upx;
						color: #ABACAD;
					}
				}

			}
		}

		.a02 {
			width: 100%;
			padding: 0 30upx;
			position: relative;
			margin-top: -210upx;
			left: 0;

			.btn {
				width: 690upx;
				height: 88upx;
				// margin: 0 34upx;
				// margin-left:65upx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 44upx;
				background-color: #F8E2A2;
				color: #232323;
				font-size: $font-sm + 8upx;

				text {
					&:last-child {
						color: #e65339;
					}
				}
			}

			.text {
				width: 100%;
				margin: 20upx 0 26upx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: $font-sm;

				span {
					text-decoration: underline;
					color: #F9E2A2;
				}
			}
		}


	}

	.liucheng-section {
		width: 100%;
		height: 280upx;
		// padding: 60upx 10upx 0;
		padding: 60upx 10upx 0;
		margin-bottom: 30upx;

		image {
			width: 100%;
		}
	}

	.recommend-section {
		width: 100%;
		padding: 0 4%;
		// box-shadow: 0upx -2upx 6upx rgba(0, 0, 0, 0.1);

		.s-header {
			width: 100%;
			font-size: 32upx;
			padding: 50upx 0 40upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 600;
		}

		.product-list {
			width: 100%;
			display: flex;
			margin-bottom: 54upx;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.item {
				width: 330upx;
				height: 500upx;
				display: flex;
				flex-direction: column;
				border-radius: 20upx;
				background-color: #fff;
				box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);

				.img {
					width: 330upx;
					height: 330upx;
					border-radius: 10upx;
					overflow: hidden;
					flex-shrink: 0;

					image {
						width: 330upx;
						height: 330upx;
					}
				}

				.info {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding: 0 20upx;
					overflow: hidden;

					.title {
						height: 48upx;
						margin-top: 20upx;
						font-size: 28upx;
						font-weight: 600;
						color: #232323;
						line-height: 1;
						align-items: center;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: block;
					}

					.text {
						color: #ABADAD;
						font-size: 24upx;
					}

					.price {
						color: #e65339;
						font-size: 36upx;
						font-weight: 600;
						align-items: flex-end;

						.icon {
							font-size: 24upx;
							color: #E52732;
							padding-right: 10upx;
						}

						.sale {
							align-items: baseline;
							margin-left: -14upx;
							margin-bottom: -6upx;
						}

						.slogan {
							color: #807c87;
							margin-left: 20upx;
							font-size: 24upx;
							text-decoration: line-through;
						}
					}

				}

			}
		}
	}
</style>
